<template lang="">
  <div>
    <div
      :id="id"
      :style="{
        width,
        height
      }"
    ></div>
  </div>
</template>
<script>
const echarts = require("echarts/lib/echarts");
export default {
  props: {
    id: {
      type: String,
      default: ""
    },
    width: {
      type: String,
      default: "400px"
    },
    height: {
      type: String,
      default: "400px"
    },
    textColor: {
      type: String,
      default: "#fff"
    },
    lineColor: {
      type: String,
      default: "#979797"
    },
    xAxisName: {
      type: String,
      default: "RT"
    },
    yAxisName: {
      type: String,
      default: "CH"
    },
    title: {
      type: String,
      default: ""
    },
    originPoint: {
      type: Object,
      default: () => {}
    },
    contrasPoint: {
      type: Object,
      default: () => {}
    }
  },

  watch: {
    contrasPoint() {
      this.$nextTick(() => {
        this.init();
      });
    }
  },

  methods: {
    init() {
      const rtOption = {
        grid: {
          bottom: "10%",
          top: "18%"
        },
        tooltip: {
          trigger: "item", //触发：散点类用item，柱形之类的坐标轴触发用axis。trigger：item对应type：scatter/effectScatter；trigger：axis对应type：line
          axisPointer: {
            type: "effectScatter" //这里只有hover在辐射点之上才触发
          },
          formatter: function (param) {
            //显示框自定义
            return (
              '<p style="display:flex;justify-content:space-between"><span>CH值 :</span> ' +
              "<span>" +
              parseFloat(param.data[1]).toFixed(2) +
              "</span>" +
              "</p>" +
              '<p style="display:flex;justify-content:space-between"><span>RT值 :</span> ' +
              "<span>" +
              parseFloat(param.data[0]).toFixed(2) +
              "</span>" +
              "</p>"
            );
          }
        },
        xAxis: {
          name: this.$props.xAxisName,
          axisLine: {
            lineStyle: {
              color: this.$props.textColor,
              width: 1
            }
          },
          //隐藏方格线
          splitLine: {
            show: false
          }
        },
        yAxis: {
          name: this.$props.yAxisName,
          axisLine: {
            lineStyle: {
              color: this.$props.textColor,
              width: 1
            }
          },
          splitLine: {
            show: false
          }
        },
        series: [
          //线
          {
            data: [
              [0, 0],
              [0.5, 1],
              [1, 0]
            ],
            type: "line",
            symbol: "none", // 去掉线的拐点
            color: this.$props.lineColor
          },
          {
            data: [
              [0.2, 0.4],
              [0.8, 0.4]
            ],
            type: "line",
            symbol: "none",
            color: this.$props.lineColor
          },
          {
            data: [
              [0.3, 0],
              [0.3, 0.6]
            ],
            type: "line",
            symbol: "none",
            color: this.$props.lineColor
          },
          {
            data: [
              [0.7, 0],
              [0.7, 0.6]
            ],
            type: "line",
            symbol: "none",
            color: this.$props.lineColor
          },
          // 标注文字
          {
            type: "scatter",
            symbolSize: 1,
            symbol: "roundRect",
            data: [[0.44, 0.6]],
            label: {
              normal: {
                position: "middle",
                distance: 0,
                show: true,
                formatter: ["对话型"].join("\n"),
                backgroundColor: "transparent",
                fontSize: 14,
                color: this.$props.textColor
              }
            }
          },
          {
            type: "scatter",
            symbolSize: 1,
            symbol: "roundRect",
            data: [[0.13, 0.2]],
            label: {
              normal: {
                position: "middle",
                distance: 0,
                show: true,
                formatter: ["练习型"].join("\n"),
                backgroundColor: "transparent",
                fontSize: 14,
                color: this.$props.textColor
              }
            }
          },
          {
            type: "scatter",
            symbolSize: 1,
            symbol: "roundRect",
            data: [[0.44, 0.2]],
            label: {
              normal: {
                position: "middle",
                distance: 0,
                show: true,
                formatter: ["混合型"].join("\n"),
                backgroundColor: "transparent",
                fontSize: 14,
                color: this.$props.textColor
              }
            }
          },
          {
            type: "scatter",
            symbolSize: 1,
            symbol: "roundRect",
            data: [[0.74, 0.2]],
            label: {
              normal: {
                position: "middle",
                distance: 0,
                show: true,
                formatter: ["讲授型"].join("\n"),
                backgroundColor: "transparent",
                fontSize: 14,
                color: this.$props.textColor
              }
            }
          }
        ]
      };

      if (this.$props.originPoint) {
        rtOption.series.unshift(this.$props.originPoint);
      }

      if (this.$props.contrasPoint) {
        rtOption.series.unshift(this.$props.contrasPoint);
      }

      if (this.$props.title) {
        const title = {
          text: this.$props.title,
          left: "center"
        };
        rtOption.title = title;
      }
      const dom = document.getElementById(this.$props.id);
      const chChart = echarts.init(dom);
      chChart.setOption(rtOption);
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  }
};
</script>
<style lang=""></style>
